<template>
    <div>
        <van-nav-bar left-text="返回" title="兑换中心" left-arrow @click-left="onClickLeft" />
        <van-tabs>
            <van-tab title="兑换码">
                <div class="box">
                    <div class="content">
                        <h4>输入兑换码</h4>
                        <van-field v-model="input" placeholder="例：H7xWBrYt"></van-field>
                        <van-button round :disabled="!btn" :class="[!btn ? 'gray' : 'green']" @click="clickdhmdh">
                            立即兑换</van-button>
                    </div>
                </div>
            </van-tab>
            <van-tab title="邀请码">
                <div class="box">
                    <div class="content">
                        <h4>输入邀请码</h4>
                        <van-field v-model="input" placeholder="例：H7xWBrYt"></van-field>
                        <van-button round :disabled="!btn" :class="[!btn ? 'gray' : 'green']" @click="clickyqmdh">
                            立即兑换</van-button>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            input: "",
            btn: false,
            input2: ""
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        async clickdhmdh() {
            let res = await this.$frontaxios.post(this.$front.changeDhm, { dhm: this.input });
            if (res.code == 1) {
                this.$dialog.alert({ title: "温馨提示", message: "兑换优惠券成功,请在优惠券里查看使用！" })
            } else {
                this.$toast.fail(res.msg);
            }
        },
        async clickyqmdh() {
            let res = await this.$frontaxios.post(this.$front.changeYqm, { yqm: this.input });
            if (res.code == 1) {
                this.$toast.success('课程兑换成功,请在我的课程里查看');
            } else if (res.code == -2) {
                this.$toast.fail('课程兑换失败');
            } else {
                this.$toast.fail('邀请码不正确或邀请码已被使用，课程兑换失败');
            }
        }
    },
    watch: {
        input: function (newval) {
            if (newval == false) {
                this.btn = false
            } else {
                this.btn = true
            }
        },
        input2: function (newval) {
            if (newval == false) {
                this.btn = false
            } else {
                this.btn = true
            }
        }
    }
}
</script>
<style scoped>
.box {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.content {
    width: 80%;
    height: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 0 20px -10px;
    border-radius: 1rem;
}

.gray {
    background-color: #F2F2F2;
}

.green {
    background-color: #07C160;
    color: #FFF;

}
</style>
